<template>
  <div class="search">
    <!-- 头部搜索框 -->
    <van-search
      v-model="value"
      show-action
      background="#3296fa"
      placeholder="搜索"
      @input="onthink"
      @search="onSearch"
    />
    <!-- 左上方按钮 -->
    <van-icon
      name="arrow-left"
      class="goback"
      color="#fff"
      size="24"
      @click="goback"
    />
    <!-- 联想区域 -->
    <van-cell-group v-if="thinkList.length > 0">
      <van-cell title="联想区域" />
      <van-cell icon="search" v-for="(item, index) in thinkList" :key="index">
        <template #title>
          <span v-html="item.newlist" @click="onSearch(item.oldlist)"></span>
        </template>
      </van-cell>
    </van-cell-group>
    <!-- 历史记录 -->
    <van-cell-group v-else>
      <van-cell title="历史记录">
        <template #default>
          <van-icon name="delete" @click="delAll" />
        </template>
      </van-cell>
      <van-cell
        icon="search"
        v-for="(item, index) in historyList"
        :key="index"
        :title="item"
        @click="onSearch(item)"
      >
        <template #default>
          <van-icon name="cross" @click.stop="delitem(index)" />
        </template>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
import { getThink } from '@/api/search.js'
import { saveLocal, getLocal, delLocal } from '@/utils/local.js'
export default {
  data () {
    return {
      value: '',
      thinkList: [],
      timer: null,
      historyList: JSON.parse(getLocal('historyList')) || []
    }
  },
  methods: {
    // 点击左上按钮返回上一个路由
    goback () {
      this.$router.back()
    },
    // 确认搜索
    onSearch (value) {
      this.$router.push(`/searchResult/${value}`)
      this.historyList.unshift(value)
      this.historyList = [...new Set(this.historyList)]
      saveLocal('historyList', JSON.stringify(this.historyList))
    },
    // 输入框改变
    onthink () {
      if (this.value.length === 0) {
        this.thinkList = []
        return
      }
      clearTimeout(this.timer)
      this.timer = setTimeout(async () => {
        if (this.value.length === 0) {
          this.thinkList = []
          return
        }
        const res = await getThink(this.value)
        this.thinkList = res.data.data.options
        this.thinkList = this.thinkList.map(item => {
          return {
            oldlist: item,
            newlist: item.replace(
              this.value,
              `<span style="color:#3296fa">${this.value}</span>`
            )
          }
        })
      }, 500)
    },
    // 删除单挑历史记录
    delitem (index) {
      this.historyList.splice(index, 1)
      saveLocal('historyList', JSON.stringify(this.historyList))
    },
    // 删除所有历史记录
    delAll () {
      this.$dialog
        .confirm({
          title: '温馨提示',
          message: '是否清除所有的历史记录'
        })
        .then(() => {
          this.historyList = []
          delLocal('historyList')
        })
        .catch(() => {})
    }
  }
}
</script>

<style lang="less" scoped>
.search {
  position: relative;
 /deep/ .goback {
    position: absolute;
    top: 32px;
    left: 6px;
    z-index: 10;
  }
  /deep/ .van-search {
    padding: 30px 12px 10px 40px;
   /deep/ .van-search__action {
      color: #fff;
      &:active {
        background-color: #3296fa;
      }
    }
  }
}
</style>
